<template>
  <div id="scan">
    <x-header :left-options="{showBack: false}" @on-click-back="comeback" style="background-color:#4786ff;">部门出库 任务中</x-header>
    <x-table :cell-bordered="false" style="background-color:#fff;">
      <thead>
      </thead>
      <tbody>
      <tr style="text-align: center">
        <td><span class="btn">
        <router-link to="/home" tag='span' >工号:{{scancodegh}}</router-link></span></td>
        <td><span>卡片数:{{scancodesize}}</span></td>
        <td>
          <span class="btn" @click="checboxshow">批量操作
          </span>
          <span class="btn" @click="selectAll">全选
          </span>
        </td>
      </tr>
      </tbody>
    </x-table>
    <checker v-model="demo1" default-item-class="demo1-item" type="checkbox" selected-item-class="demo1-item-selected" @on-change="test">
      <div ref="mybox">
        <div class="chart-wrapper" v-for="(item, index) in  showdata"  >
          <div class="select" v-show="checkshow">

            <checker-item v-model="index"></checker-item>


          </div>
          <x-table :cell-bordered="false" class="chart1">
            <thead>
            </thead>
            <tbody>
            <tr>
              <td class="td-left">库房名称</td>
              <td class="td-right">{{item.kfmc}}</td>
            </tr>
            <tr>
              <td class="td-left">卡片编号</td>
              <td class="td-right">{{item.kpbh}}</td>
            </tr>
            <tr>
              <td class="td-left">资产名称</td>
              <td class="td-right">{{item.zcmc}}</td>
            </tr>

            <tr class="trexpect">
              <td style="float:left;width:120px;height:40px;line-height:40px;">
               <span class="btn" @click="ConfirmedBack(index)">出库</span>
                <!--<x-button class="btn4" type="primary" @click.native="ConfirmedBack(index)" style="font-size: 1em"><span class="icon-az">出库</span></x-button>-->
              </td>

              <td>
              <!--<x-button mini class="icon-btn" style="background: dodgerblue;"-->
                        <!--@click.native="deleterecord(index)">删除-->
              <!--</x-button>-->
                <span class="btn" @click="deleterecord(index)">删除</span>
              </td>
            </tr>
            </tbody>
          </x-table>
        </div>
      </div>

    </checker>
    <br>


   <!-- <div v-transfer-dom>
      <confirm v-model="show4" :title="confirmtitle" confirm-text="好" theme="ios" cancel-text="再看看"
               @on-cancel="onCancel" @on-show="onShow" @on-hide="onHide" @on-confirm="onConfirmsubmit">
        <p style="text-align:center;">是否将本次盘点的所有结果提交给资产处</p>
      </confirm>
    </div>-->

    <div v-transfer-dom>
      <confirm v-model="show5" :title="confirmtitle" confirm-text="好" theme="ios" cancel-text="再看看"
               @on-cancel="onCancel" @on-show="onShow" @on-hide="onHide" @on-confirm="onConfirmdelete">
        <p style="text-align:center;">是否将该条记录删除</p>
      </confirm>
    </div>


    <div v-transfer-dom>
      <confirm v-model="show6" :title="confirmtitle" confirm-text="好" theme="ios" cancel-text="再看看"
               @on-cancel="onBatchCancel" @on-show="onShow" @on-hide="onHide" @on-confirm="onBatchConfirmdelete">
        <p style="text-align:center;">是否将选中记录删除</p>
      </confirm>
    </div>





    <tabbar class="tabbar" style="position:fixed;bottom:0;width:100%">
      <tabbar-item show-dot>

        <span slot="label"> <x-button type="default"  :class="{btn1:showbutton,btn2:disableddata}"  :disabled="disableddata"
                                      @click.native="BatchConfirmedBack">出库 </x-button></span>
      </tabbar-item>
      <tabbar-item>
        <span slot="label"> <x-button type="warn"   :disabled="disableddata"   @click.native="BatchDelete">删除</x-button></span>
      </tabbar-item>
    </tabbar>
    <br>
  </div>
</template>
<script>
  import {XTable, LoadMore, XHeader} from 'vux'
  import {XButton, Box, GroupTitle, Group, Flexbox, FlexboxItem, Divider} from 'vux'
  import {XDialog, TransferDomDirective as TransferDom} from 'vux'
  import {XInput, Cell} from 'vux'
  import {CellBox, Checklist, Selector} from 'vux'
  import _ from 'lodash'
  import {AjaxPlugin} from 'vux'
  import {Confirm, AlertModule, Alert} from 'vux'
  import {Tabbar, TabbarItem} from 'vux'
  import { Checker, CheckerItem, Popup } from 'vux'
  import { CheckIcon } from 'vux'
  import Qs from 'qs'
  import axios from 'axios'
  import   config  from "@/common/js/config.js"

  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      XTable,
      Flexbox,
      FlexboxItem,
      XDialog,
      XInput,
      Group,
      Cell,
      XHeader,
      CellBox,
      Checklist,
      Selector,
      Confirm,
      Alert,
      Tabbar,
      TabbarItem,
      Checker,
      CheckerItem,
      Popup,
      CheckIcon,
      Qs,
      axios,
      config

    },
    data() {
      return {
        show: false,
        routerdata: '',
        objectList: ['0'],
        checkshow: false,
        checkeddata: '',
        selectedarray: [],
        scangh: '',
        scansize: '',
        showdata: [],
        yqdata: '',
        yqlist: [],
        lqlist: [],
        lqdata: '',
        detailwz: '',
        signaldata: [],
        backshowdata: [],
        show3: false,
        confirmtitle: '提示',
        show4: false,
        scancodegh: '',
        scancodesize: '',
        disableddata: true,
        showbutton:false,
        otherbutton: false,
        scanurl: config.baseurl,
        checklist:['1'],
        demo1:'',
        testvalue:'',
        lsarray:[],
        qxfalg:false,
        tabArr:[],
        show5:false,
        show6:false,
        deleteSerialNo:''


      }

    },
    methods: {


      ConfirmedBack(index){
      var obj=this.showdata[index]
        var This=this
        var DealBack={
          bmxh:obj.bmxh,
          kpxh:obj.kpxh,
          serialNo:obj.serialNo
        }
        var dealBacks=new Array();
        dealBacks.push(DealBack)
        var data= Qs.stringify(  {dealBacks:JSON.stringify(dealBacks)})
        axios.post(this.scanurl + '/wd-wmt/Deliver/ConfirmedBack',
          data ,
          {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
        )
          .then(function (data) {
              AlertModule.show({
                title: '',
                content: data.data.message,
                onShow() {
                },
                onHide() {
                  This.InitScandata()
                }
              })
              setTimeout(() => {
                AlertModule.hide()

              }, 5000)

          })
          .catch(function (error) {
            console.log(error);
          });
      },

      BatchConfirmedBack(){
        var dealBacks=new Array();
        var This=this
        for(var i=0;i<this.selectedarray.length;i++){
          var j = this.selectedarray[i]
          var obj=this.showdata[j]
          var DealBack={
            bmxh:obj.bmxh,
            kpxh:obj.kpxh,
            serialNo:obj.serialNo
          }
          dealBacks.push(DealBack)
        }

        var data= Qs.stringify(  {dealBacks:JSON.stringify(dealBacks)})
        axios.post(this.scanurl + '/wd-wmt/Deliver/ConfirmedBack',
          data ,
          {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
        )
          .then(function (data) {
              AlertModule.show({
                title: '',
                content: data.data.message,
                onShow() {
                },
                onHide() {
                  This.InitScandata()
                }
              })
              setTimeout(() => {
                AlertModule.hide()

              }, 5000)
          })
          .catch(function (error) {
            console.log(error);
          });
      },



      deleterecord(index){
        this.deleteSerialNo=index
        this.show5=true
      },
      onConfirmdelete(){

        console.log(this.showdata[ this.deleteSerialNo].serialNo)

        AjaxPlugin.$http.post(this.scanurl + '/wd-wmt/Deliver/deleteCardBack?serialNo=' + this.showdata[ this.deleteSerialNo].serialNo)
                .then((data) => {
                  this.InitScandata()

                }).catch(e => {
          // 打印一下错误
          console.log(e)
        })

      },
BatchDelete(){
  this.show6=true

},


      onBatchConfirmdelete(){

        var dealBacks=new Array();
        var This=this
        for(var i=0;i<this.selectedarray.length;i++){
          var j = this.selectedarray[i]
          var obj=this.showdata[j]
          var DealBack={
            serialNo:obj.serialNo
          }
          dealBacks.push(DealBack)
        }

        var data= Qs.stringify(  {dealBacks:JSON.stringify(dealBacks)})
        axios.post(this.scanurl + '/wd-wmt/Deliver/deleteCardBackBatch',
          data ,
          {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
        )
          .then(function (data) {
            This.InitScandata()
          })
          .catch(function (error) {
            console.log(error);
          });
      },


      onBatchCancel(){

      },




        comeback(){

            this.$router.replace({path:'/second/id',query:{gh:this.scancodegh,kpbh:'0',size:this. scancodesize}});
        },
      test(val){
        this.selectedarray=val
        if (this.selectedarray.length != 0) {
          this.disableddata = false
        } else {
          this.disableddata = true
        }
        this.showbutton= !this.disableddata

      },
      selectAll() {
        if(this.checkshow){
        }else{
          this.checkshow=!this.checkshow

        }

        this.qxfalg=!this.qxfalg
        if( this.qxfalg){
          for(var a=0;a<this.showdata.length;a++){
            this.lsarray.push(a)
          }
          this.demo1=this.lsarray

        }else{

          this.demo1=[]
          this.lsarray=[]
          this.checkshow=!this.checkshow
        }




      },
      checboxshow() {

        this.checkshow = !this.checkshow
      },
      RemoveRepeat(arr){
        var newArr = [];
        for(var i =0;i<arr.length-1;i++){
          if(newArr.indexOf(arr[i]) == -1){
            newArr.push(arr[i]);
          }
        }
        return  newArr
      },

      signaledit(index) {

        this.signaldata = []
        this.signaldata.push(index)
        this.show = !this.show

      },

      removeByValue(arr, val) {
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == val) {
            arr.splice(i, 1);
            break;
          }
        }
      },
      change(val, label) {
        if (val.length>0){
          this.selectedarray.push(this.checkeddata)
        } else {
          this.removeByValue(this.selectedarray, this.checkeddata);
        }



      },
      InitScandata() {
        AjaxPlugin.$http.post(this.scanurl + '/wd-wmt/Deliver/GetBackList')
          .then((data) => {
            this.scancodegh = data.data.gh;
            this.scancodesize = data.data.size;
            this.showdata = data.data.wxAssetCardConfirmBmcks
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },





      onCancel() {

      },






      onHide() {

      },
      onShow() {

      },

      showModule() {

      },

    },

    mounted() {
      this.scancodegh = this.$route.query.gh

      this.InitScandata()
    },


  }
</script>

<style lang="less"  >
  @import '~vux/src/styles/close';
  @import '~vux/src/styles/1px.less';
#scan{
  height:100%;
}
.flex-demo {
    text-align: center;
    color: #fff;
    background-color: #20b907;
    border-radius: 4px;
    background-clip: padding-box;
  }

  .btn {
    padding: 5px 10px;
    color: #4786ff !important;
    background-color: #fff;
    border: 1px solid #4786ff;
    border-radius: 50px
  }

  .chart-wrapper {
    margin-top: 25px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .select {
    width: 50px;
    margin-right: 10px;

  }

  .chart1 {
    /*flex:1;*/
    /* position: relative;
     left:70px;*/
    width: 90% !important;
    margin: 0px auto !important;
    background-color: #fff !important;
    border-radius: 10px !important;
  }
  .td-left {
    width: 40%;
    text-align: left !important;
    color: #c7ccd6;
    padding-left: 10px
  }

  .td-right {
    width: 60%;
    text-align: right !important;
    color: #343f51;
    padding-right: 10px
  }
.tabbar  .weui-btn{
  padding-left:0;
  padding-right:0;
}
.trexpect{
  width:100%;
  /*display:flex;*/
  height:40px;
  line-height: 40px;
}
  /*.trexpect td:nth-child(1){*/
    /*flex:0 0 120px;*/
  /*}*/
  /*.trexpect td:nth-child(2){*/
    /*flex:0 0 80px;*/
  /*}*/
  /*.trexpect td:nth-child(3){*/
    /*flex:1;*/
  /*}*/
  /*.trexpect .weui-btn{*/
    /*padding-left:0;*/
    /*padding-right:0;*/
  /*}*/
  .required {
    position: absolute;
    left: -15px;
    top: 50%;
    font-size: 13px;
    color: red;
    transform: translate(0, -50%);
  }
   .tip{
    position: absolute;
    right: -15px;
    top: 50%;
    font-size: 13px;
    color: red;
    transform: translate(0, -50%);
  }
   .weui-cells {
    overflow: inherit!important;
  }
   .weui-cell {

    border-width: 0 !important;
    background-color: #fafafa !important;
  }

   .weui-cells:before {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }

   .weui-cells:after {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }

 .btn1 {
    color: #fff !important;
    background: #4786ff !important;
    border-radius: 0 !important;
    border-width: 0 !important
  }

 .btn1:after {

    border-radius: 0 !important;
    border-width: 0 !important
  }

 .btn2 {
    color: #fff !important;
    background: #7aa9ff !important;
    border-radius: 0 !important;
    border-width: 0 !important
  }

  .btn2:after {
    border-radius: 0 !important;
    border-width: 0 !important
  }

 .btn3 {
    color: #fff !important;
    background: #a5b0c8 !important;
    border-radius: 0 !important;
    border-width: 0 !important
  }

.btn3:after {
    border-radius: 0 !important;
    border-width: 0 !important
  }

.btn4 {
    width: 100%!important;
    height: 35px!important;
    text-align: center!important;
    text-indent: 13px;
    padding-left:16px!important;
    /*margin-left: 10px !important;*/
    color: #4786ff !important;
    background-color: #f7f7f7 !important;
    border-radius: 50px !important;
  }

  .btn4-delete {
    width: 40%!important;
    margin-left: 20px !important;
   /* height: 35px!important;
    text-align: right!important;
    padding-left: 16px!important;
    margin-left: 10px !important;
    color: #4786ff !important;
    background-color: #f7f7f7 !important;
    border-radius: 50px !important;*/
    /*width: 40%!important;
    height: 35px!important;
    text-align: center!important;
    margin-left: 20px !important;
    background-color: #f7f7f7 !important;
    border-radius: 50px !important;
    border: none;*/
    /*padding-left: 16px!important;*/
  /*  color: #4786ff !important;*/

  }




.btn4:after {
    margin-left: 10px !important;
    border-width: 0 !important;
    border-radius: 50px !important;
  }
.btn5 {
    margin-left: 10px !important;
    color: #fff !important;
    background-color: #4786ff !important;
    border-radius: 50px !important;
  }

.btn5:after {
    margin-left: 10px !important;
    border-width: 0 !important;
    border-radius: 50px !important;
  }
#scan .icon-site {
    /*display:inline-block;*/
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translate(0,-50%);
    z-index: 1;
    width: 32px !important;
    height: 32px !important;
    background: url("./assets/site.png") no-repeat !important;
    background-position: center;
    background-size: cover;
  }


  #scan .icon-delete {
    /*position: relative;*/
    display: block;
    width: 32px !important;
    height: 32px !important;
    background: url("./assets/delete.png") no-repeat center;
    margin: 0px auto;
    /*display: block;*/

    /*top: 60%;*/
   /* left: 20px;*/
   /* transform: translate(0,-50%);*/
   /* position: absolute;
    z-index: 1;
    width: 32px !important;
    height: 32px !important;
    background: url("./assets/delete.png") no-repeat center;
    line-height: 32px;*/
   /* background-position: center;*/
   /* background-size: cover;*/

  }


.dialog-header {
    width: 100%;
    height: 35px;
    background: url("./assets/ic_person@2x.png") no-repeat;
    background-position: right;
    background-size: contain;

    background-color: #4786ff;
  }

.weui-cells {
    margin-top: 0 !important;
  }

.dialog-title {
    line-height: 30px;
    color: #666;
  }

.img-box {
    height: 350px;
    width: 300px;
    overflow: hidden;
  }
.close{
   position:absolute;
    left: 0%;
    right: 0%;
      bottom: -50px;
    z-index: 10;
    text-align: center;
    font-size: 32px;
  }
.close .weui-icon-clear{
    font-size: 32px;
    color:#fff ;
    opacity: 0.6;
  }
 .vux-close {
    margin-left: 90%;
    margin-top: 8px;
    margin-bottom: 8px;
    color: red;
  }
  .demo1-item {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    display: inline-block;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    margin-left: 10px;
  }
  .demo1-item-selected {
    /*border-color: green;*/
    background: #4786ff;
  }

</style>
